<template>
    <div class="login_container">
        <div class="login_box">
            <div class="avatir_box">
                <img src="../assets/logo.png" alt="">
            </div>
            <el-form class="login_form" ref="login_form" :model="form" :rules="rules">
                <el-form-item class="login_input" prop="username">
                    <el-input 
                    type="text" 
                    prefix-icon="el-icon-search"
                    v-model="form.username"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item class="login_input" prop="password">
                    <el-input 
                     type="password"
                     prefix-icon="el-icon-search"
                     v-model="form.password"
                     >
                    </el-input>
                </el-form-item>
                <el-form-item class="form_bt">
                    <el-button type="primary" @click="login()">登录</el-button>
                    <el-button type="info" @click="resetForm('login_form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>   
</template>

<script>
export default {
name:'Login',
data() {
    return {
        form:{
            username:'admin',
            password:'123456',
        },
        rules:{
            username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
            ],
        }
    };
},
methods:{
    //表单的重置
    resetForm(formName) {
        this.$refs[formName].resetFields()
    },
    //表单预验证
    login(){
        this.$refs.login_form.validate((valid) => {
            // console.log(valid);
            if (valid) {
                this.$http.post('login',this.form).then(
                    respose => {//正确请求时执行的代码
                        // console.log('请求成功了了', respose.data.meta);
                        if (respose.data.meta.status!=200) {
                            this.$message.error(respose.data.meta.msg+'，请重新尝试');  
                        }
                        else{
                            this.$message({
                                message: '恭喜你，登录成功',
                                type: 'success'
                            });
                            // console.log('登录成功了', respose.data.data.token);
                            sessionStorage.setItem('token',respose.data.data.token)
                            this.$router.push('/home')
                        }
                        
                    },
                    error => {//错误时执行的代码
                        console.log('请求失败了了'+error.message)
                        this.$message.error('不好意思登陆失败了',error.message); 
                    },
                )
            }
            

        })
    }
}
}
</script>

<style scoped>
.login_container{
    background-color: #2b4b6b;
    height: 100%;
    position: relative;
}
.login_box{
    width: 500px;
    height: 350px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    border-radius: 10px;
}
.avatir_box{
    width: 150px;
    height: 150px;
    /* border: 1px solid black; */
    border-radius: 50%;
    background-color: white;
    padding: 15px;
    position: absolute;
    top: 0;
    left: 50%;
    transform:translate(-50%,-50%);
    box-shadow: 0 0 10px 0 rgb(218, 216, 216);
}
.avatir_box img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgb(203, 194, 182);
}
.login_input{
    margin:35px 40px;
}
.form_bt{
    display: flex;
    justify-content:center
}
.login_form{
    margin-top: 120px;
}
</style>